<template>
	<view> 
		<view v-if="videoflag" style="position: relative;">
			<video :show-fullscreen-btn='false' :src="videourl" id="Myvideo"  @fullscreenchange="fullscreenchange" v-show="isOpenVideo" style="width: 100vw;height: 100vh;"></video>
			<view class="fullscreen-control" v-show="isOpenVideo" :style="{top:BarTop + 'px'}" @click="exitFullscreen">
			  <image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/%E8%BF%94%E5%9B%9E.png" mode="" style="width: 100%;height: 100%;"></image>
			</view>
		</view>
		<view v-else>
			<view class="city-btn" style="">
				<u-icon name="map" color="#000000" :size="30"></u-icon>
				<text class="city-text">{{city}}</text>
				<!-- <u-icon name="play-right-fill" color="#000000" :size="30" style="transform: rotate(90deg);"></u-icon> -->
			</view>
			<view style="width: 750rpx;height: 538rpx;">
				<u-swiper :list="list" :mode='none' height='538' interval="3000" @click="swiperClick"></u-swiper>
			</view>
			<view class="announcement">
				<view class="anbox">
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/Group%205211%402x.png" mode="" style="width: 70rpx;height: 67rpx;" ></image>
					<view class="anbox1" >
						<swiper class="swiper-container" :vertical="true" :autoplay="true" interval="2000" duration="500" :circular='true'>
						  <swiper-item class="switem" v-for="(item,index) in videolist" :key="index" @click="video1(item)">
								<view class="anbox-title" style="width: 445rpx;">
									<uv-parse :content="item.title"></uv-parse>
								</view>
								<view class="bof">
									<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/123.png" mode="" style="width: 100%;height: 100%;"></image>
								</view>
						  </swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="recycle-step box-card" >
				<view style="display: flex;flex-wrap: wrap;justify-content: space-between;" class="box-top" >
					<view class="box-img" v-for="(item,index) in img" :key="index" @click="gotoPageA(item)">
						<image :src="item.url" mode="" style="width: 64rpx;height: 64rpx;margin-left: 16rpx;"></image>
						<text class="boximg-sp">{{item.name}}</text>
					</view>
				</view>
				<view class="Go" @click="gotoPage('/pageA/order/form')">
					<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/Group%204332%402x.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="glass gonggao" v-if="indexNotifi && indexNotifi.length > 0">
				<view class="user-header-list">
					<swiper class="swiper-container" :vertical="true" :autoplay="true" interval="2000" duration="500" :circular='true'>
					  <swiper-item v-for="(item,index) in indexNotifi" :key="index">
					    <img   :src="item.user_avatar" alt="" class="user-header-item"  >
					  </swiper-item>
					</swiper>
				</view>
				<view class="notice-bar" style="width: 480rpx;background: transparent !important;">
					<u-notice-bar @end="noticeEnd" type="none" mode="vertical" :list="noticeList" :volume-icon="false"></u-notice-bar>
				</view>
				<view class="notice-bar1" style="width: 380rpx;background: transparent !important;">
					<u-notice-bar @end="noticeEnd" type="none" mode="vertical" :list="noticeList1" :volume-icon="false"></u-notice-bar>
				</view>
			</view>
			<view class="footer">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/Group%204422%402x.png" mode="" class="footerimg"></image>
				<view class="tabss">
					<jp-tabs  v-model="current" :tabs="tabs"  @change="changeTab" pills='true' field=name></jp-tabs>
				</view>
				<swiper :current="swiperIndex" @change="swiperChange" class="swiper-container1">
					<swiper-item class="swiper-item" v-for="(tabItem,tabIndex) in tabs" :key="tabIndex">
						<scroll-view class="scrollview-box" :scroll-x="true" @scroll="scroll">
							<block v-for="(item,index) in tabItem.waste" :key="index">
								<view class="scroll-item" @click="gotoPage('/pageA/order/form?name='+tabItem.name)">
									<view style="font-size: 28rpx;font-weight: bold;color: black;padding-top: 10rpx;margin-left: 25rpx;">{{item.name}}</view>
									<view style="font-size: 20rpx;color: #485E47;margin-top: 10rpx;margin-left: 25rpx;">如{{item.description}}</view>
									<view class="f-price">{{item.price}}<text style="font-size: 20rpx;margin-left: 3rpx;">元/{{item.units}}</text></view>
									<image :src="url + item.image" mode="" class="f-img"></image>
								</view>
							</block>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<view class="hall">
				<view class="hall-title"></view>
				<block v-if="QOrder.length>0">
					<view class="hall-main" v-for="(item,index) in QOrder" :key="index">
						<view style="width: 100%;height: 1rpx;"></view>
						<view class="hall-title1">
							<view class="hallbox">
								<view class="hall-title2">{{item.orderaddress.name}}</view>
								<view class="hall-title3">{{item.book_category?item.book_category:'其他'}}</view>
							</view>
							<view class="hall-title4">预估金额:￥<text style="font-size: 36rpx;">{{item.estimate_price}}</text></view>
						</view>
						<view class="hall-address">
							<view class="addressbox">
								<view class="address-quan">
									<view class="quan"></view>
								</view>
								<view class="hall-address-sp">
									<view style="width: 100%;height: 1rpx;"></view>
									<view class="hall-sp">
										{{item.orderaddress.address}}
									</view>
									<view class="hall-tx">
										距您约 {{item.distance}}km
									</view>
								</view>
							</view>
						</view>
						<view class="hall-phone">
							<view class="phone-num">{{item.orderaddress.mobile}}</view>
							<view class="phone-btn" @click="acceptOrder(item.id)">
								立即抢单
							</view>
						</view>
					</view>
				</block>
				
				<block v-else>
					<view class="hall-main" style="background-color: #F6F8F7;">
						<u-empty text="暂无订单" mode="data"></u-empty>
					</view>
				</block>
			</view>
			<!-- <c-custom-tabbar /> -->
			<!-- <view style="height: 60rpx;"></view> -->
		</view>
		
		<view>
			<view class="popup-cover" v-if="popupVisibleC"></view>
			<view class="bottom-popup-mask" v-if="popupVisibleC">
			    <view class="bottom-popup-content">
					<view class="popup-box">
						<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/Group 2110@2x.png" mode="" style="width: 100%;height: 100%;"></image>
						<text class="popup-title">{{modalTitle}}</text>
						<text class="popup-content">{{modalContent}}</text>
						<view class="popop-btn-box">
							<view class="popop-btn" @click="GotoModal">
								{{modalBtn}}
							</view>
						</view>
					</view>
			    </view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				videolist:'',
				banner:[  ],
				BarTop:'',
				noticeList:[],  
				noticeList1:[],  
				exchange:{ },
				recommend:{},
				indexNotifi: [],
				headershow:[],
				bottomList:[],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				QOrder:[],
				videoC:null,
				city:'位置获取中...',
				siteList:[],
				lists:[],
				flag:0,
				current: 0,
				tabs:  [],
				isOpenVideo:false,
				videoContext:null,
				videourl:'',
				list: [],
				videoflag:false,
				url:'https://admin.cqycgyl.com',
				img:[
					{url:'https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/hssy5.png',name:'四季衣物'},
					{url:'https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/hssy1.png',name:'废纸纸壳'},
					{url:'https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/hssy2.png',name:'各类金属'},
					{url:'https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/hssy4.png',name:'家电回收'},
					{url:'https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/hssy3.png',name:'各类塑料'},
				],
				tabIndex: 0,
				scrollLeft: 120,
				swiperIndex: 0,
				popupVisibleC: false,
				modalTitle: '',
				modalContent: '',
				modalUrl: '',
				modalBtn: ''
			}
		},
		methods:{
			video1(item){
				this.isOpenVideo = true
				this.videoflag = true
				this.videourl = this.url + item.video
				this.videoContext = uni.createVideoContext('myVideo', this)
				this.videoContext.play()
				this.videoContext.requestFullScreen()
			},
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
				this.videoContext.stop()
				this.isOpenVideo = false
				this.videoflag = false
				}
			},
			exitFullscreen() {
			    this.videoContext.stop()
			    this.isOpenVideo = false
			    this.videoflag = false
			},
			acceptOrder(id){
				this.$u.api.recycler.acceptOrder({order_id:id}).then(res => { 
					this.popupVisibleC = true
					if(res.code == 1){
						this.modalTitle = '恭喜您抢单成功！'
						this.modalContent = '请尽快上门回收'
						this.modalBtn = '去回收'
						this.modalUrl = '../../pageA/recycler/form?orderId='+id
					}else if(res.code == 0){
						this.modalTitle = res.msg
						this.modalContent = '成为回收员才可以抢单哦'
						this.modalBtn = '去申请'
						this.modalUrl = '../../pageA/recycler/add'
					}else if(res.code == 4){
						this.modalTitle = '抢单失败'
						this.modalContent = res.msg
						this.modalBtn = '确定'
						this.modalUrl = '../../pageA/recycler/list'
					}else{
						this.modalTitle = '抢单失败'
						this.modalContent = res.msg
						this.modalBtn = '确定'
						this.modalUrl = ''
					}
				}).catch(req =>{
					uni.showToast({
					    title: req.msg,
					    icon: 'error'
					})
				})
			},
			GotoModal(){
				if(this.modalUrl!=''){
					uni.navigateTo({
						url: this.modalUrl
					})
				}
				this.popupVisibleC = false
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			changeTab(index) {
				this.tabIndex = index
				this.bottomList = this.tabs[index].waste
				this.swiperIndex = index
			},
			swiperChange(e){
				this.current = e.detail.current
			},
			showToast(txt){
				if(txt == ''){
					return false
				}
				this.$u.toast(txt)
			},
			randNoticeList(){
				let tempList=[];
				for(let i in this.indexNotifi)
				{
					tempList.push(`${this.indexNotifi[i].getText}${this.indexNotifi[i].orderMoney}元`)
				}
				this.noticeList = tempList
			},
			randNoticeList1(){
				let tempList=[];
				for(let i in this.indexNotifi)
				{
					tempList.push(this.indexNotifi[i].orderFinishTime)
				}
				this.noticeList1 = tempList
			},
			noticeEnd(){
				this.randNoticeList()
			},
			noticeEnd1(){
				this.randNoticeList1()
			},
			gotoPageA(item){
				console.log(item);
				let name = ''
				switch(item.name){
					case '四季衣物':
					name = '衣物类'
					break;
					case '废纸纸壳':
					name = '纸皮类'
					break;
					case '各类金属':
					name = '金属类'
					break;
					case '家电回收':
					name = '电器类'
					break;
					case '各类塑料':
					name = '塑料类'
					break;
				}
				
				uni.navigateTo({
					url:`../../pageA/order/form?name=${name}`
				})
			},
			gotoPage(page){
				getApp().globalData.tools.gotoPage(page)
			}, 
			getIndexData(location){
				console.log(location)
				this.$u.api.index.getIndexData(location).then(res => {
					console.log(res)
					this.videolist = res.data?.noticeList ||[]
					this.banner = res.data?.banner || []
					this.exchange = res.data?.exchange || {}
					this.siteList = res.data?.siteList || {}
					this.indexNotifi = res.data?.orderList || []
					this.headershow = []
					this.tabs = res.data?.wastelist.filter(item => item.waste.length>0) || []
					this.bottomList = this.tabs[0]?.waste || []
					this.city = res.data?.address || '位置获取中...'
					for(let i in res.data?.orderList)
					{
						if(i<3){
							this.headershow.push(res.data?.orderList[i])
						}
					}
				
					this.randNoticeList()
					this.randNoticeList1()
				})
			},
			getOrderList(location){
				this.$u.api.index.getOrderList(location).then(res =>{
					if(res.code == 1){
						this.QOrder = res.data.data
						this.QOrder.forEach(item =>{
							if (item.orderaddress.mobile && item.orderaddress.mobile.length === 11) {
							    item.orderaddress.mobile = item.orderaddress.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
							}
							if (item.orderaddress.name && item.orderaddress.name.length > 1) {
							    let newName = item.orderaddress.name.charAt(0);
							    for (let i = 1; i < item.orderaddress.name.length; i++) {
							        newName += '*';
							    }
							    item.orderaddress.name =  newName;
							}
						})
					}
				})
			},
			handlePlay(){
				this.videoC.requestFullScreen();
			},
			handlefullscreenchange(e){
				if(!e.detail.fullScreen)
				{
					this.videoC.pause();
				}
			},
			swiperClick(e){
				if(this.list[e].url != ''){
					uni.navigateTo({
						url: this.list[e].url
					})
				}
			},
		},
		onReady(){
			this.videoC = uni.createVideoContext('myvideo');
		},
		onShow() {
			let location = {}
			let that = this
			// #ifdef WEB
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						location={
							lng:res?.longitude,
							lat:res?.latitude
						}
						that.getIndexData(location)
						that.getOrderList(location)
					},
					fail: function (e)
					{
						that.getIndexData({})
						that.getOrderList()
					},
				});
			// #endif
			// #ifdef MP-WEIXIN
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						location={
							lng:res?.longitude,
							lat:res?.latitude
						}
						that.getIndexData(location)
						that.getOrderList(location)
					},
					fail: function (e){
						that.getIndexData({})
						that.getOrderList()
						that.city = "用户未授权"
						
						uni.showModal({
						    title: '提示',
						    content: '此功能需要获取您的位置信息，请确认授权',
							success: function (modalRes) {
								if (modalRes.confirm) {
									// 引导用户去设置中开启位置服务
									uni.openSetting();
								}
							}
						});
						
						  
					},
				});
			// #endif
		
		},
		onLoad() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			   this.BarTop = menuButtonInfo.top;
			this.$u.api.index.getBanner().then(res =>{
				
				this.list = res.data.filter(item =>{
					return item.type == 1
				})
				this.list.forEach(val =>{
					val.image = this.url + val.image 
				})
			})
		}
	}
</script>
<style scoped>
	.fullscreen-control{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 24rpx;
		z-index: 999;
	}
	.announcement{
		width: 690rpx;
		height: 112rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		background-color: white;
		border-radius: 16rpx;
		position: relative;
		display: flex;
		align-items: center;
	}
	.anbox{
		width: 635rpx;
		height: 67rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: flex-end;
	}
	.anbox1{
		width: 532rpx;
		margin-left: 15rpx;
		height: 67rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.switem{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.bof{
		width: 52rpx;
		height: 52rpx;
	}
	.anbox-title{
		width: 495rpx;
		font-size:28rpx;
		color: #919191;
		overflow:hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 -o-text-overflow:ellipsis;
	}
	.no{
		text-align: center;
	}
	.box-top{
		width: 100%;
		margin-top: 20rpx;
	}
	.tabss{
		width:660rpx;
		margin-left: 30rpx;
		margin-top: 10rpx;
		height: 60rpx;
	}
	.box-img{
		width: 96rpx;
		height: 109rpx;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	
	
	.f-img{
		width: 108rpx;
		height: 100rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.f-price{
		font-size: 32rpx;
		color: #1EC691;
		margin-top: 10rpx;
		margin-left: 25rpx;
	}
	.boximg-sp{
		width: 94rpx;
		height: 24rpx;
		margin-top: 20rpx;
		text-align: center;
		line-height: 24rpx;
		
	}
	.Go{
		width: 630rpx;
		height: 130rpx;
		margin-top: 40rpx;
	}
	.footer-top{
		width: 690rpx;
		height: 176rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.footer-top-main{
		width: 96rpx;
		height: 127rpx;
		
	}
	.footer-top-sp{
		font-size: 24rpx;
		color: #0A2400;
		margin-top: 25rpx;
	}
	.city-btn{position: absolute;top: 115rpx;left: 40rpx;z-index: 99;}
	.city-text{font-family: PingFang SC, PingFang SC;font-weight: 700;font-size: 28rpx;color: #2A3E2A;text-align: left;font-style: normal;text-transform: none;padding: 0 4rpx;}
	
		/deep/.recycle-step{ 
		position: relative;
		z-index: 1;;
		background-color: white;
		border-radius: 0;
		margin:0rpx 30rpx 0rpx 30rpx;
		margin-top: 10rpx;
		border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;box-shadow: 0 0 0 0 #fff;
		}
		.footer{
			width: 690rpx;
			min-height:360rpx ;
			margin-left: 30rpx;
			background: linear-gradient(177deg, #CEFFE6 0%, #FFFFFF 15%, #FFFFFF 10%, #FFFFFF 100%);
			margin-top: 20rpx;
		}
		.footerimg{
			width: 190rpx;
			height: 29rpx;
			margin-top: 34rpx;
			margin-left: 30rpx;
		}
	/deep/ .order-btn{ margin: 30rpx 30rpx 50rpx 30rpx !important;display:  block;}
	.recycle-icon-bar{ display: flex;align-items: center;justify-content: space-between;width: 100%;margin:30rpx 0 0 0;}
	.recycle-icon-item{ display: flex;align-items: center;font-size: 26rpx;color:#666;}
	/deep/ .recycle-icon-item .u-icon{background-color: #71d5a1 !important;border-radius: 100rpx;padding:10rpx;margin-right: 6rpx;}
	.notice-bar{padding:0;border-radius: 10rpx;overflow: hidden;font-size: 24rpx;}
	.notice-bar1{padding:0;border-radius: 10rpx;overflow: hidden;font-size: 24rpx;margin-left: -20rpx;}
	.index-title{ font-weight: bold;margin-bottom: 20rpx;color:#333;}
	/deep/ .u-tag{border-radius: 100rpx 100rpx 100rpx 0 !important;}
	.exchange-list{display: flex;flex-wrap: wrap;justify-content: space-around;}
	.exchange-item{margin-right: 20rpx;font-size: 24rpx;width: 46%;background-color: #f9f9f9;display: inline-block;border-radius:15rpx;padding: 20rpx;}
	.exchange-item-img{height: 200rpx;width: 100%;border-radius:15rpx;}
	.exchange-item-bottom{ display: flex;align-items: center;justify-content: space-between;}
	.exchange-item-title{margin-bottom: 10rpx;color:#444; margin-top:10rpx}
	.exchange-integral{ font-size: 26rpx;font-weight: bold;margin-right: 4rpx;color:#36BE6A;}
	.exchange-item-btn{background-color: #19be6b;color:white;border-radius: 10rpx;padding:4rpx 10rpx;}
	
	.recommend-list{background-color: unset;box-shadow: unset;padding:20rpx 0rpx}
	.recommend-item{ margin-bottom: 20rpx;background-color: white;border-radius: 10rpx;position: relative;padding: 20rpx;background-color: white;border-radius: 20rpx;}
	.recommend-item-left{margin-right: 10rpx;margin-left:0;}
	.recommend-item-right{margin-left: 10rpx;margin-right:0;}
	.recommend-item-title{ margin-bottom: 20rpx;color:#444;margin-top:10rpx}
	.recommend-item-price{color:#19be6b;} 
	.recommend-item-price text{font-weight: bold;font-size: 40rpx;}
	.recommend-item-old-price{text-decoration: line-through;margin-left: 20rpx;color:#ccc;font-size: 24rpx;}
	
	.site-item{display: flex;flex-wrap: nowrap;justify-items: center;margin-top: 30rpx;}
	.site-icon{width: 92rpx;height: 90rpx;margin: 10rpx;margin-right: 20rpx;}
	.site-name{font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #242C28;text-align: left;font-style: normal;text-transform: none;}
	.site-info{display: flex;flex-wrap: wrap;flex-direction: column;justify-content: space-evenly;}
	.site-address-info{display: flex;align-items: center;justify-content: space-between;}
	.site-address{display: block;width:380rpx;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #909C95;text-align: left;font-style: normal;text-transform: none;}
	.site-km{display: block;background-color: #ebf8f0;border-radius: 20rpx;padding: 10rpx 15rpx;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 20rpx;color: #36BE6A;text-align: left;font-style: normal;text-transform: none;}
	
	.recommend-list{background-color: unset;box-shadow: unset;padding:20rpx 0rpx}
	.shop-list{ margin-top:20rpx;}
	.shop-item{ margin-bottom: 20rpx;background-color: white;padding:20rpx;border-radius: 15rpx;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #EEEEEE;
    border-radius: unset;}
	.shop-item-img{ display: block;width: 176rpx;height: 176rpx;border-radius: 15rpx;flex-shrink: 0;}
	.shop-item-info{display: flex;flex-direction: column;flex:1;margin-left: 20rpx;}
	.shop-item-info-row{display: flex;align-items: center;justify-content: space-between;}
	.shop-item-title{margin-bottom: 10rpx;color:#333;font-weight: bold;}
	.shop-item-info-distance{font-size: 24rpx;}
	.shop-item-address{margin-top:14rpx;font-size: 24rpx;}
	.text-row{background-color: rgba(255, 106, 51, 0.16);width: 230rpx;font-size: 20rpx;text-align: center; color: rgba(222, 88, 39, 1);}
	.quan{
		width: 182rpx;
		height: 36rpx;
		margin-top: 10rpx;
		font-size: 22rpx;
		color: #FF6E41;
		text-align: right;
		line-height: 36rpx;
		position: relative;
	}
	.quansp{
		position: absolute;
		top:0;
		right: 2rpx;
	}
	.glass {background-color: #49ff672b;backdrop-filter:blur(20px);}
	.gonggao{width: 700rpx;height: 80rpx;margin-left:26rpx; z-index: 10; display: flex;align-items: center;flex-direction: row;flex-wrap: nowrap;}
	.laba-icon{height: 64rpx;width: 64rpx;background: url('@/static/images/index-laba.png') no-repeat center center;background-size: 100% 100%;margin:auto 12rpx;}
	.user-header-list{position:relative;width:80rpx;height:60rpx;}
	.swiper-container{width: 100%;height: 100%;position: absolute;left: 20rpx;}
	.user-header-item{width: 56rpx;height: 56rpx;position:absolute;top:0;border-radius: 50%;border: 2rpx solid white;}
	.order-info-box{width:542rpx;position: relative;}
	.number-style{color: #36BE6A;background: #EBF9EC;margin: 0 7rpx;padding: 0 2rpx;font-weight: initial;}
	.order-btn{height:100rpx}
	.lijixiadan{font-size:34rpx;background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/lijixiadan.png') no-repeat center center;background-size:100% 100%;width:606rpx;display:block;height:100rpx;text-align:center;line-height:80rpx;color:#fff;margin:auto;}
	/deep/ .u-notice-bar.u-type-none-light-bg{padding-left: 0;}
	.box-card-new{width: 690rpx;background: #FFFFFF;border-radius: 16rpx 16rpx 16rpx 16rpx;margin: auto;}
	.star{width: 180rpx;height: 24rpx;display: flex;justify-content: space-between;}
	.pfsp{
		height: 24rpx;
		line-height: 24rpx;
		color: #36BE6A;
	}
	.toptitle{
		width: 100%;
		height: 48rpx;
	}
	.scroll-view_H {
		width: 100%;
	}
	.hall{
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
	.hall-title{
		width: 146rpx;
		height: 46rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/Group%205382%402x.png') center/cover;
	}
	.hall-main{
		width: 690rpx;
		height: 338rpx;
		margin-top: 30rpx;
		background-color: white;
		border-radius: 16rpx;
	}
	.hall-title1{
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 29rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.hallbox{
		max-width:220rpx;
		display: flex;
		align-items: center;
		height: 34rpx;
	}
	.hall-title2{
		max-width: 128rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 34rpx;
		color: #1F2921;
	}
	.hall-title3{
		width: 98rpx;
		height: 32rpx;
		border-radius: 8rpx;
		color: black;
		font-size: 22rpx;
		text-align: center;
		line-height: 32rpx;
		margin-left: 8rpx;
	}
	.hall-title4{
		width: 400rpx;
		height: 30rpx;
		font-size: 24rpx;
		color: #FFA863;
		line-height: 30rpx;
		text-align: right;
	}
	.hall-address{
		width: 690rpx;
		margin-top: 10rpx;
		height: 148rpx;
		border-bottom: 2rpx solid #F2F2F2;
		position: relative;
	}
	.addressbox{
		width: 630rpx;
		margin-left: 30rpx;
		height: 96rpx;
		display: flex;
		position: absolute;
		bottom: 20rpx;
		background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/index/Group%205194%402x.png') center/cover;
	}
	.address-quan{
		width: 44rpx;
		height: 96rpx;
		display: flex;
		align-items: center;
	}
	.quan{
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		border: 4rpx solid #14C887;
	}
	.hall-address-sp{
		width: 536rpx;
		height: 96rpx;
	}
	.hall-sp{
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
		overflow:hidden;
		 white-space: nowrap;
		 text-overflow: ellipsis;
		 -o-text-overflow:ellipsis;
	}
	.hall-tx{
		width: 100%;
		height: 22rpx;
		line-height: 22rpx;
		font-size: 24rpx;
		color: #666;
		margin-top: 20rpx;
	}
	.hall-phone{
		width: 630rpx;
		margin-left: 30rpx;
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.phone-num{
		width: 204rpx;
		height: 28rpx;
		font-size: 32rpx;
		color: #222222;
		line-height: 28rpx;
	}
	.phone-btn{
		width: 260rpx;
		height: 60rpx;
		border-radius: 58rpx;
		background-color: #14C887;
		text-align: center;
		line-height: 60rpx;
		color: white;
		font-size: 28rpx;
	}
	.scrollview-box{
	  white-space: nowrap;
	  width: 100%;
	}
	.scroll-item{
	  width: 306rpx;
	  height: 146rpx;
	  background: linear-gradient( 270deg, #EDFFF2 0%, #EDFEF8 100%);
	  position: relative;
	  display: inline-block;
	  border-radius: 16rpx;
	  margin-top: 10rpx;
	  margin-right: 20rpx;
	}
	.swiper-container1{
		width: 630rpx;
		height: 166rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}
</style>

